<template>
  <div class="app-container">
    <el-row class="toolbar">
      <el-col :span="24">
        <el-form :inline="true" :model="filters">
        <el-select v-model="filters.column" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
          <el-button type="primary" v-on:click="init">查询</el-button>
          <el-button type="primary" v-on:click="handleAdd">添加</el-button>
				</el-form-item>
			</el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="data.list" element-loading-text="Loading"  fit highlight-current-row>
          <el-table-column label="设备名称" prop="name">
          </el-table-column>
          <el-table-column label="IMEI" width="160" prop="imei">
          </el-table-column>
          <el-table-column label="SIM"  width="160" prop="sim">
          </el-table-column>
          <el-table-column label="类型" prop="typeName">
          </el-table-column>
          <el-table-column  width="160" label="添加时间">
            <template slot-scope="scope">
              {{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column  width="160" label="最后更新时间">
            <template slot-scope="scope">
              {{scope.row.lastUpdate/1000|moment("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag size="small" :type="scope.row.status===1?'success':scope.row.status===0?'danger':'info'">{{scope.row.status===1?'在线':scope.row.status===0?'离线':'未激活'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当日/总里程(km)" width="130">
            <template slot-scope="scope">
            {{scope.row.todayTrip+"/"+scope.row.trip}}
            </template>
          </el-table-column>

          <el-table-column label="所属账号" width="120" prop="account">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">{{scope.row.account}}</el-button>
            </template>

          </el-table-column>

          <el-table-column label="操作" prop="account">
            <template slot-scope="scope">
              <el-button @click="editDevice(scope.row)" type="primary" size="mini">编辑</el-button>
            </template>
          </el-table-column>


        </el-table>
      </el-col>
    </el-row>
    <el-row class="toolbar">
      <el-col :span="24">
        <el-pagination
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
        :page-sizes="this.$store.state.common.pageSizes"
        :page-size="this.$store.state.common.pageSize"
        :total="data.total"
        style="float:right;">
        </el-pagination>
      </el-col>
      </el-col>
    </el-row>
    <DeviceBox @add-success="addDeviceSuccess"></DeviceBox>


    <el-dialog  :title="$t('map.menuDeviceEdit')" width="400px"  :visible.sync="deviceEditFormVisible" :lock-scroll="false">
      <el-form label-width="80px" :model="editForm"  ref="editForm" >

        <el-form-item :label="$t('common.deviceImei')" prop="imei">
          <el-input type="text" v-model="editForm.imei" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.deviceName')" prop="name">
          <el-input type="text" v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.deviceSim')" prop="sim">
          <el-input type="text" v-model="editForm.sim" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.deviceType')" prop="typeId">
          <el-select v-model="editForm.typeId"  placeholder="设备类型">
            <el-option
              v-for="item in this.$store.state.user.dict.deviceTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限速" prop="speedLimit">
          <el-input-number v-model="editForm.speedLimit" :min="0" :max="200" label="描述文字"></el-input-number>
          <!--<el-tag v-if="editForm.speedLimit==0" type="info">不限速</el-tag>-->
          <!--<el-tag v-else  type="warning">限速 {{editForm.speedLimit}}km/h</el-tag>-->
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeEdit">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click.native="editSubmit">{{$t('common.ok')}}</el-button>
      </div>
    </el-dialog>


    <!-- 添加设备 -->
    <el-dialog class="Blue" :title="$t('map.menuDeviceAdd')" width="50%" :visible="addDeviceVisible">
      <el-form label-width="80px" :model="addForm" ref="addForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('common.deviceType')" prop="typeId">
              <el-select v-model="addForm.typeId"  placeholder="设备类型">
                <el-option
                  v-for="item in this.$store.state.user.dict.deviceTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('common.deviceImei')" prop="imei" :rules="[{ required: true, message: '请输入设备号', trigger: 'blur'},{ min: 10, max: 16, message: '长度在 10 到 16 个字符', trigger: 'blur'}]">
              <el-input type="text" v-model="addForm.imei" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.deviceName')" prop="name">
              <el-input type="text" v-model="addForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.deviceSim')" prop="sim">
              <el-input type="text" v-model="addForm.sim" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="hasPermission('user:group:view')">
            <GroupTree @handleNodeClick="handleNodeClick" :currentKey="currentKey"></GroupTree>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeAddDialog">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click.native="addSubmit">{{$t('common.ok')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DeviceBox from '@/views/map/components/menu/Device'
import {
  getDeviceTypes,
  updateDevice,
  getAllDevices,
  deviceAdd
} from '@/api/api'
export default {
  components: {
    DeviceBox
  },
  data() {
    return {
      page: 1,
      data:{},
      editForm: {
        id: '',
        imei: '',
        name: '',
        sim: '',
        typeId: '',
        speedLimit: ''
      },
      addForm: {
        imei: '',
        name: '',
        sim: '',
        typeId:1,
        groupId:0
      },
      speedLimit: '',
      deviceEditFormVisible: false,
      addDeviceVisible: false,
      filters: {
          column:'',
					keyword:''
				},
      options: [{
         value: 'name',
         label: '设备名称'
       }, {
         value: 'imei',
         label: 'IMEI号'
       }, {
         value: 'sim',
         label: 'SIM号码'
       }, {
         value: 'account',
         label: '所属账号'
       }]
    }

  },
  created() {
    this.init();
  },
  methods: {
    closeAddDialog () {
      this.addDeviceVisible = false
      Object.assign(this.addForm, {
        imei: '',
        name: '',
        sim: '',
        typeId:1,
        groupId:0
      })
    },
    editDevice (row) {
      this.deviceEditFormVisible = true
      Object.assign(this.editForm, {
        id: row.id,
        imei: row.imei,
        name: row.name,
        sim: row.sim,
        typeId: row.typeId,
        speedLimit: row.speedLimit
      })
      getDeviceTypes().then(data => {
        this.$store.state.user.dict.deviceTypes = data
      })
    },
    closeEdit () {
      this.deviceEditFormVisible=false
      Object.assign(this.editForm, {
        id: '',
        imei: '',
        name: '',
        sim: '',
        typeId: '',
        speedLimit: ''
      })
    },
    editSubmit(){
      this.$refs.editForm.validate((valid) => {
        if(valid) {
          updateDevice(this.editForm).then((res) => {
            this.init()
            this.closeEdit()
          });
        }
      });
    },
    handleAdd: function() {
      this.addDeviceVisible = true
//      this.$store.dispatch('setVisblesFlag', [{key:'deviceAddForm',value:true}]);
      getDeviceTypes().then(data => {
        this.$store.state.user.dict.deviceTypes = data
      })
    },
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if(valid) {
          var params = {
            imei:this.addForm.imei,
            name: this.addForm.name,
            sim: this.addForm.sim,
            typeId:this.addForm.typeId,
            groupId:this.addForm.groupId
          };
          deviceAdd(params).then((data) => {
            console.log(data)
            this.$notify({
              type: 'success',
              title: '提示',
              message: '添加成功'
            })
            this.closeAddDialog()
            this.init()
          });
        }
      });
    },
    addDeviceSuccess () {
      this.init()
      this.$store.state.user.visibles.deviceAddForm = false
      this.$notify({
        title: '提示',
        message: '添加成功',
        type: 'success'
      })
    },
    init() {
      let para = {
        page: this.page,
        pageSize:this.$store.state.common.pageSize,
        column:this.filters.column,
        keyword:this.filters.keyword
      };
      getAllDevices(para).then(data => {
        this.data = data
        this.$store.state.user.devices = data.list
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         deleteUser(row.id).then(data => {
           this.$message({
             type: 'success',
             message: '删除成功!'
           });
           this.init()
         })
       });

    },

    handleSizeChange(val) {
      this.$store.dispatch('updatePageSize',val);
      this.init();

     },
     handleCurrentChange(val) {
       this.page = val;
       this.init();
     },

  }
}
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

</style>
